<template>
  <footer class="footer" @click.stop='gotoRouter'>
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="首页">
        <span class="test"><i slot="icon" class="icon-index"></i></span>
        <span style="font-size: 4vw;">首页</span>
      </mt-tab-item>
      <mt-tab-item id="分类页">
        <span class="test"><i slot="icon" class="icon-category"></i></span>
        <span style="font-size: 4vw;">分类</span>
      </mt-tab-item>
      <!--<mt-tab-item id="购物车页">
          <span class="test"><i slot="icon" class="icon-car"></i></span>
          <span style="font-size: 4vw;">购物车</span>
        </mt-tab-item>-->
      <mt-tab-item id="收藏夹">
        <span class="test"><i slot="icon" class="icon-car"></i></span>
        <span style="font-size: 4vw;">收藏夹</span>
      </mt-tab-item>
      <mt-tab-item id="用户页">
        <span class="test"><i slot="icon" class="icon-user"></i></span>
        <span style="font-size: 4vw;">我的</span>
      </mt-tab-item>
    </mt-tabbar>
  </footer>
</template>

<script>
  import Vue from 'vue'
  import {
    Tabbar,
    TabItem
  } from 'mint-ui'
  Vue.component(Tabbar.name, Tabbar)
  Vue.component(TabItem.name, TabItem)
  export default {
    methods: {
      gotoRouter() {
        this.$router.replace({
          name: this.selected
        })
      }
    },
    data() {
      return {
        //对应mt-tab-item 的id值
        selected: '首页'
      }
    },
    mounted() {
      //获取当前路由名称，根据该名称给当前footer添加is-selected
      let Rname = this.$route.name;
      switch (Rname) {
        case '首页':
          this.selected = '首页';
          break;
        case '分类页':
          this.selected = '分类页';
          break;
        case '分类子页':
          this.selected = '分类页';
          break;
        case '收藏夹':
          this.selected = '收藏夹';
          break;
        case '用户页':
          this.selected = '用户页';
          break;
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "tabbar.less";
</style>